<template>
  <view class="gDetails originalDetails">
    <view class="GuideDetailsTop">
      <view class="GuideDetailsTops">
        <view class="PolicyDocumentLiTitle">{{ policyInfo.policyName }}</view>
        <view class="PolicyDocumentLiTag">
          <view class="PolicyDocumentLiTagli">{{
            getDictLabel(policyInfo.policyLevel, this.policyLevel)
          }}</view>
          <view class="PolicyDocumentLiTagli">{{
            getDictLabel(policyInfo.policyType, this.policyType)
          }}</view>
        </view>
      </view>
    </view>
    <view class="gDetailsTop">
      <view class="gDetailsTopTitle">政策基本信息</view>
      <view class="gDetailsTopList">
        <view class="gDetailsTopListLi">
          <view class="gDetailsTopListLil">所属区划</view>
          <view class="gDetailsTopListLir">{{ policyInfo.policyRegion }}</view>
        </view>
        <view class="gDetailsTopListLi">
          <view class="gDetailsTopListLil">发布单位</view>
          <view class="gDetailsTopListLir">{{ policyInfo.policyPubdept }}</view>
        </view>
        <view class="gDetailsTopListLi">
          <view class="gDetailsTopListLil">发布日期</view>
          <view class="gDetailsTopListLir">{{ policyInfo.pubTime }}</view>
        </view>
      </view>
    </view>
    <view class="gDetailsTop">
      <view class="gDetailsTopTitle">政策详情</view>
      <view
        class="gDetailsTopContent"
        v-html="this.policyInfo.policyContent"
      ></view>
    </view>
  </view>
</template>

<script>
import { guideDetail } from "../../../api/api.js";
import { useStore } from "vuex";
import { DICT_TYPES } from "@/store/modules/dict";
import { getDictLabel } from '@/utils/dict';

export default {
  props: {
    policyId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      policyInfo: {}, // 政策信息
      policyLevel: [], // 政策层级
      policyType: [] // 政策类型
    };
  },
  methods: {
    getDictLabel,

    // 从Vuex获取字典数据
    async getDictData() {
      const store = useStore();

      // 获取政策层级字典
      this.policyLevel = await store.dispatch(
        "dict/loadDict",
        DICT_TYPES.POLICY_LEVEL
      );

      // 获取政策类型字典
      this.policyType = await store.dispatch(
        "dict/loadDict",
        DICT_TYPES.POLICY_TYPE
      );
    },

    async init(id) {
      try {
        const res = await guideDetail(id);
        console.log("政策详情数据:", res);
        if (res.code === 0) {
          this.policyInfo = res.data;
        }
      } catch (error) {
        console.error("获取政策详情失败:", error);
      }
    },
  },
  async created() {
    // 获取字典数据
    await this.getDictData();

    // 加载政策详情
    this.init(this.policyId);
  },
};
</script>

<style lang="scss">
.gDetails {
  &.originalDetails {
    padding: 30rpx 24rpx;
  }
  .GuideDetailsTop {
    .GuideDetailsTops {
      padding: 28rpx 33rpx;
      border-radius: 20rpx;
      margin: 0 0 27rpx;
      background: #ffffff;

      .PolicyDocumentLiTitle {
        font-size: 32rpx;
        color: #202020;
      }

      .PolicyDocumentLiTag {
        display: flex;
        justify-content: flex-start;
        padding: 15rpx 0;

        .PolicyDocumentLiTagli {
          padding: 0 13rpx;
          margin-right: 15rpx;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 24rpx;
          color: #4e5262;
          background: #ecf3fc;
        }
      }
    }
  }
  .gDetailsTop {
    margin: 30rpx 0 0;
    padding: 32rpx;
    background: #ffffff;
    border-radius: 20rpx;
    .gDetailsTopTitle {
      font-size: 28rpx;
      color: #202020;
      padding-left: 35rpx;
      background: url("/static/images/sanjiao.png") no-repeat left center /
        17rpx 21rpx;
    }
    .gDetailsTopContent {
      font-size: 28rpx;
      color: #4e5262;
      line-height: 55rpx;
    }
    .gDetailsTopList {
      padding: 20rpx 0 0;
      .gDetailsTopListLi {
        display: flex;
        line-height: 55rpx;
        justify-content: space-between;
        .gDetailsTopListLil {
          font-size: 28rpx;
          color: #4e5262;
        }
        .gDetailsTopListLir {
          font-size: 28rpx;
          color: #202020;
        }
      }
    }
  }
}
</style>
